<template>
	<div class="page-layout">
		<div class="page-head-bar">
			<div class="page-head-bar-return-btn" @click="page_back">
				<b-icon-chevron-compact-left />
			</div>
			<div class="page-head-bar-title">修改密码</div>
		</div>
		<div class="page-content">
			<b-card class="reset-password-panel">
				<b-form-input type="password" v-model="passwd.input" class="reset-password-panel-input" placeholder="请输入新密码" />
				<b-form-input type="password" v-model="passwd.confirm" class="reset-password-panel-input" placeholder="请确认新密码" />
				<b-button variant="primary" class="reset-password-panel-btn" @click="reset_password">
					<b-spinner v-if="loading" variant="light" label="Loading" />
					<div v-else>确认修改</div>
				</b-button>
			</b-card>
		</div>
	</div>
</template>

<script>
	import {BIcon, BIconChevronCompactLeft} from 'bootstrap-vue'
	
	export default {
		data(){
			return {
				loading: false,
				passwd: {
					input: '',
					confirm: ''
				}
			}
		},
		components:{
			BIcon,
			BIconChevronCompactLeft
		},
		mounted() {
			
		},
		methods: {
			page_back(){
				this.$router.back()
			},
			reset_password(){
				if(!this.loading){
					this.loading = !this.loading
					
					if(this.passwd.input == this.passwd.confirm){
						this.$axios.post('/user/setPassword', {password: this.passwd.input}).then(resp => {
							switch(resp.ret){
								case 0:
									this.$msg('修改成功', {end: () => this.$router.back()})
									break
								case 1001:
									this.$msg('登录信息失效')
									break
							}
							
							this.loading = !this.loading
						}).catch(resp => {
							this.loading = !this.loading
						})
					} else {
						this.$msg('两次密码填写不一致')
						this.loading = !this.loading
					}
				}
			}
		}
	}
</script>

<style>
	.page-layout {
		position: relative;
		padding-top: 3rem;
	}
	.page-head-bar {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 20;
		height: 3rem;
		background-color: #FFFFFF;
		border-bottom: 0.0625rem solid #EEEEEE;
	}
	.page-head-bar-return-btn {
		display: inline-block;
		width: 3rem;
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		cursor: pointer;
	}
	.page-head-bar-title {
		display: inline-block;
		width: calc(100% - 3rem);
		padding-right: 3rem;
		height: 3rem;
		font-size: 1.25rem;
		line-height: 3rem;
		text-align: center;
		color: #666666;
	}
	.page-content {
		padding: 0.9375rem;
	}
	.reset-password-panel {
		padding: 0.625rem;
	}
	.reset-password-panel-input {
		border: 0;
		border-bottom: 0.0625rem solid #ced4da;
		border-radius: 0;
		margin: 0.625rem 0;
	}
	.reset-password-panel-input:focus {
		border-color: #80bdff;
		box-shadow: none;
	}
	.reset-password-panel-btn {
		height: 3.125rem;
		line-height: 2.375rem;
		margin-top: 0.9375rem;
		width: 100%;
	}
</style>
